<template>
  <main>
    <x-header :left-options="{backText : ''}">规章详情
      <a slot="right" class="right" @click="edit">
        <x-icon  class="icon" type="ios-plus-empty" fill="#0000ff" size="28"></x-icon>
        <span class="right-text">编辑</span>
      </a>
      <div slot="overwrite-left" @click="goBack" class="goBack"></div>
    </x-header>
    <section>
      <div class="title">{{title}}</div>
      <div class="content" v-html="content"></div>
      <div class="file-title">附件列表</div>
      <div class="file" v-for="(item, index) in attachment" :key="index">
        <img class="preview" :src="imgUrl"
             :preview="imgUrl"
             width="100%" height="20px" alt="">
        <span class="preview-name">{{item.imgName}}</span>
      </div>
      <div class="sender">{{sender}}</div>
      <div class="time">{{sendTime | formatDate('YYYY-MM-DD HH:mm')}}</div>
    </section>
  </main>
</template>
<script>
export default {
  data () {
    return {
      imgUrl: 'http://images1.6zcool.com/pic/c4e424856d9dd886e1b6cae5926117bd-4.jpg', // 预览图片地址
      id: '', // 规章 id
      title: '', // 文章标题
      sender: '', // 发送人
      content: '', // 内容
      sendTime: '', // 发送时间
      attachment: [] // 附件
    }
  },
  created () {
    // 获取详情数据
    this.getDetail()
  },
  methods: {
    // 返回上个页面
    goBack () {
      this.$router.go(-1)
    },
    // 页面赋值
    getDetail () {
      if (this.$store.state.rulesDetail) {
        let { id, title, sender, content, sendTime, attachment } = this.$store.state.rulesDetail
        this.id = id
        this.title = title
        this.sender = sender
        this.content = content
        this.sendTime = sendTime
        this.attachment = JSON.parse(attachment)
      }
    },
    // 编辑规章
    edit () {
      console.log('edit')
      this.$router.push('/rules/edit')
    }
  }
}
</script>
<style lang="less" scoped>
  .right {
    position: relative;
    top: -4px
  }
  .right-text {
    color: #8080ff;
    position: relative;
    top: -8px;
    font-size: 1.6rem;
  }
  .title {
    font-size: @fsbig * 1.2;
    font-weight: bold;
    padding: 30px 0;
  }
  .content {
    text-align: left;
    padding-left: 1.5rem;
    font-size: @fssmall;
    max-height: 35rem;
    overflow: hidden;
    overflow-y: scroll;
  }
  .file-title {
    text-align: left;
    padding-left: 1.5rem;
    font-size: @fssmall;
    font-weight: bold;
    padding-top: 1.5rem;
  }
  .file {
    text-align: left;
    padding-left: 1.5rem;
    font-size: @fssmall;
  }
  .preview {
    position: absolute;
    opacity: 0;
  }
  .preview-name {
    color: #53a0e4;
    text-decoration: underline;
  }
  .sender {
    text-align: right;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
  }
  .time {
    text-align: right;
    padding-right: 1.5rem;
  }
  .submit {
    padding: 20px;
  }
</style>
